<template>
  <div class="appcontainer">
    <el-container style="width: 100%; height: 100%;">
      <el-aside class="aside" :style="{width: appConfig.showMenu? '200px': '64px'}">
        <LeftMenu></LeftMenu>
      </el-aside>
      <el-container class="el-container">
        <el-header class="xheader">
          <div @click="showMenu" class="showLeftIcon">
            <el-icon v-if="appConfig.showMenu"><Fold /></el-icon>
            <el-icon v-if="!appConfig.showMenu"><Expand /></el-icon>
          </div>
          <div class="title">{{title}}</div>
          <div class="right">
            <div ref="userInfoRef" class="userInfo" v-click-outside="showUserInfoMenu">
              <div class="avatar">
                <el-avatar size="small"> 
                  <svg t="1674114848488" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1575" width="28" height="28"><path d="M853.333333 943.686275h-682.666666c-44.172549 0-80.313725-36.141176-80.313726-80.313726V200.784314c0-44.172549 36.141176-80.313725 80.313726-80.313726h682.666666c44.172549 0 80.313725 36.141176 80.313726 80.313726v662.588235c0 44.172549-36.141176 80.313725-80.313726 80.313726z" fill="#48A0DC" p-id="1576"></path><path d="M311.215686 481.882353m-120.470588 0a120.470588 120.470588 0 1 0 240.941177 0 120.470588 120.470588 0 1 0-240.941177 0Z" fill="#FFFFFF" p-id="1577"></path><path d="M712.784314 481.882353m-120.470589 0a120.470588 120.470588 0 1 0 240.941177 0 120.470588 120.470588 0 1 0-240.941177 0Z" fill="#FFFFFF" p-id="1578"></path><path d="M746.817255 1024h-469.63451a26.202353 26.202353 0 0 1-26.202353-26.202353V943.686275h522.039216v54.111372c0 14.476549-11.725804 26.202353-26.202353 26.202353zM397.653333 0h228.673255c14.496627 0 26.222431 11.725804 26.222432 26.202353V120.470588h-281.09804V26.202353C371.45098 11.725804 383.176784 0 397.653333 0z" fill="#007EB5" p-id="1579"></path><path d="M652.54902 803.137255h-281.09804a20.078431 20.078431 0 1 1 0-40.156863h281.09804a20.078431 20.078431 0 1 1 0 40.156863z" fill="#556080" p-id="1580"></path><path d="M592.313725 200.784314V120.470588h-160.62745v80.313726h-120.470589l200.784314 200.784313 200.784314-200.784313z" fill="#B0D3F0" p-id="1581"></path><path d="M311.215686 481.882353m-60.235294 0a60.235294 60.235294 0 1 0 120.470588 0 60.235294 60.235294 0 1 0-120.470588 0Z" fill="#F29C1F" p-id="1582"></path><path d="M712.784314 481.882353m-60.235294 0a60.235294 60.235294 0 1 0 120.470588 0 60.235294 60.235294 0 1 0-120.470588 0Z" fill="#F29C1F" p-id="1583"></path></svg>
                </el-avatar>
              </div>
              <div class="accountttc">
                <div class="account">{{getAccount(userInfo)}}</div>
                <div class="ttc">租户: {{userInfo.ttc}}</div>
              </div>
              <div class="arrow">
                  <ArrowRightBold/>
              </div>
            </div>
            <el-popover
                ref="userInfoMenuRef"
                :virtual-ref="userInfoRef"
                trigger="click"
                virtual-triggering
                :show-arrow="false"
              >
              <div class="menuItem">
                <div class="menuItemButton updatePasswordItem" @click="updatePasswordAction">
                  <div class="icon">
                    <svg t="1674226310073" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5691" id="mx_n_1674226310075" width="16" height="16"><path d="M354.850133 799.744c-44.032 0-79.291733-35.259733-79.291733-74.888533v-202.820267a79.872 79.872 0 0 1 79.906133-79.940267h46.318934c0.341333 0 0.6144-0.273067 0.6144-0.6144v-75.093333c0-66.048 40.516267-106.564267 106.564266-106.564267 66.048 0 106.5984 40.516267 106.5984 106.5984v75.093334c0 0.341333 0.273067 0.648533 0.6144 0.648533h41.915734a79.872 79.872 0 0 1 79.940266 79.872v202.205867c0 41.6768-33.792 75.4688-75.4688 75.4688h-307.712z m0.6144-309.1456a31.4368 31.4368 0 0 0-31.470933 31.4368v202.205867c0 17.373867 14.097067 31.4368 31.470933 31.4368h298.222934a31.4368 31.4368 0 0 0 31.4368-31.4368v-202.205867a31.4368 31.4368 0 0 0-31.4368-31.402667h-298.222934z m206.6432-48.469333c0.341333 0 0.6144-0.3072 0.6144-0.648534v-75.093333c0-39.594667-18.500267-58.129067-58.129066-58.129067-35.259733 0-53.76 18.5344-53.76 58.1632v75.093334c0 0.341333 0.273067 0.648533 0.6144 0.648533l110.660266-0.068267z" p-id="5692"></path><path d="M509.474133 1016.695467c-272.554667 0-494.592-222.071467-494.592-494.592S236.885333 27.511467 509.44 27.511467c115.063467 0 220.228267 39.697067 310.545067 109.226666a1.092267 1.092267 0 0 0 1.7408-1.092266l-19.5584-92.8768a1.024 1.024 0 0 1 0-0.238934c0-5.051733 0-14.916267 4.9152-19.968l0.2048-0.238933c4.983467-10.001067 10.001067-15.018667 15.018666-15.018667h4.983467c10.103467 0 25.258667 10.103467 25.258667 20.206934l35.293866 181.521066v5.154134c0 15.121067-10.103467 25.224533-20.1728 25.224533l-181.521066 35.293867h-5.154134c-10.103467 0-25.258667-10.069333-25.258666-20.1728 0-5.051733 0-15.121067 5.051733-20.1728 5.051733-5.051733 10.103467-10.103467 15.1552-10.103467l129.092267-24.8832a1.092267 1.092267 0 0 0 0.546133-1.877333c-94.890667-88.064-224.1536-127.6928-355.4304-110.7968-200.704 26.0096-356.7616 187.869867-377.412267 389.154133-26.043733 253.678933 164.932267 469.572267 409.634134 484.488533 253.269333 15.428267 466.193067-188.074667 466.1248-441.719466 0-25.6-0.170667-47.684267-3.618134-69.358934-0.887467-5.461333-2.56-12.8-3.6864-18.3296a55.9104 55.9104 0 0 1-1.365333-11.707733 13.175467 13.175467 0 0 1 1.501867-4.642133c1.297067-2.56 6.2464-11.707733 22.254933-13.550934h5.051733c15.121067 0 24.029867 10.9568 30.242134 30.1056v0.170667c4.949333 12.868267 10.0352 52.1216 10.069333 90.760533 0.273067 272.554667-227.089067 494.592-499.643733 494.592h0.136533z" p-id="5693"></path></svg>                  </div>
                    <div class="text">修改密码</div>
                    
                </div>
                <div class="menuItemButton logoutItem" @click="logoutAction">
                  <div class="icon">
                    <svg t="1674117352280" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2315" width="16" height="16"><path d="M868 732h-70.3c-4.8 0-9.3 2.1-12.3 5.8-7 8.5-14.5 16.7-22.4 24.5-32.6 32.5-70.5 58.1-112.7 75.9-43.6 18.4-90 27.8-137.9 27.8-47.9 0-94.3-9.4-137.9-27.8-42.2-17.8-80.1-43.4-112.7-75.9-32.6-32.5-58.1-70.4-76-112.5C167.3 606.2 158 559.9 158 512s9.4-94.2 27.8-137.8c17.8-42.1 43.4-80 76-112.5s70.5-58.1 112.7-75.9c43.6-18.4 90-27.8 137.9-27.8 47.9 0 94.3 9.3 137.9 27.8 42.2 17.8 80.1 43.4 112.7 75.9 7.9 7.9 15.3 16.1 22.4 24.5 3 3.7 7.6 5.8 12.3 5.8H868c6.3 0 10.2-7 6.7-12.3C798 160.5 663.8 81.6 511.3 82 271.7 82.6 79.6 277.1 82 516.4 84.4 751.9 276.2 942 512.4 942c152.1 0 285.7-78.8 362.3-197.7 3.4-5.3-0.4-12.3-6.7-12.3z" p-id="2316" fill="#707070"></path><path d="M956.9 505.7L815 393.7c-5.3-4.2-13-0.4-13 6.3v76H488c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h314v76c0 6.7 7.8 10.5 13 6.3l141.9-112c4.1-3.2 4.1-9.4 0-12.6z" p-id="2317" fill="#707070"></path></svg>
                  </div>
                  <div class="text">退出登录</div>
                </div>
              </div>
              </el-popover>
          </div>
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
    <UplodaPasswordDialog v-if="isShowUplodaPasswordDialog" v-model:isShow="isShowUplodaPasswordDialog"></UplodaPasswordDialog>
  </div>
  
</template>

<script setup lang="ts">
import {useUserStore} from './stores/user'
import { useRoute, useRouter } from "vue-router"
import { onMounted, onActivated, ref, unref, watch} from "vue"
import LeftMenu from "./components/Menu/Menu.vue"
import { Fold, Expand, ArrowRightBold } from '@element-plus/icons-vue'
import {useAppStore} from './stores/app'
import { ClickOutside as vClickOutside } from 'element-plus'
import { storeToRefs } from 'pinia'
import { ElMessage, ElMessageBox } from 'element-plus'
import UplodaPasswordDialog from './components/LoginReg/UplodaPasswordDialog.vue'
import RPAApi from './apis/rpa'

const appStore = useAppStore()
const userStore = useUserStore()
const { appConfig } = storeToRefs(appStore)
const { userInfo } = storeToRefs(userStore);
const route = useRoute();
const router = useRouter();
const userInfoRef = ref()
const userInfoMenuRef = ref()
const isShowUplodaPasswordDialog = ref(false)

console.log('route meta', );
const title = ref()
watch(
  () => route.name,
  (name: any) => {
    if (route.meta.title) {
      console.log('route meta', route.meta, route, route.path);
      title.value = route.meta.title
    }
  },{
    immediate: true,
    deep: true,
  }
)


onMounted(async ()=>{
  console.log("[App] onMounted");
  console.log('route meta', route.meta);

  console.log("[App] path", route.path, route.fullPath, location.href);
  if(location.href.indexOf('/#/login')==-1 && location.href.indexOf('/#/register')==-1){
    userStore.fetchUserInfo().catch(err=>{
      ElMessage({
            type: 'error',
            message: err,
      });
    });
  }

  // 通知Electron 取消启动动画
  console.log('ipcRenderer', (window as any).ipcRenderer, window);
  try {
    (window as any).ipcRenderer.send('stop-loading-main')
  } catch (error) {
    console.warn("未运行在Electron项目中。");
  }

  // 监听从主线程发送过来的事件。
  try{
        console.log('ipcRenderer on executeTaskEnd');
        (window as any).ipcRenderer.on('executeTaskEnd', async (event:any, arg:any)=>{
            console.log("executeTaskEnd", arg);
            let taskId =  arg.taskID;
            let taskName = arg.taskName;
            let taskStatus = arg.taskStatus;
            let executeStart = arg.executeStart;
            let executeEnd = arg.executeEnd;
            let executeLogID = arg.executeLogID;
            RPAApi.createDetail(taskId, taskName, taskStatus, executeStart, executeEnd, "").then(ret=>{

            }).catch(err=>{
              ElMessage({
                type: 'error',
                message: err,
              });
            });
        })
    }catch(err){
    }
})

const showMenu = ()=>{
  console.log("showMenu");
  if(appConfig.value.showMenu){
    appStore.showMenu(false);
  }else{
    appStore.showMenu(true);
  }
  
}

const getAccount = (userInfo:any)=>{
  if(userInfo.nickName && userInfo.nickName.length>0){
    return userInfo.nickName;
  }else{
    return userInfo.username;
  }
}

const showUserInfoMenu = ()=>{
  unref(userInfoMenuRef).popperRef?.delayHide?.()
}

const logoutAction = async ()=>{
  userInfoMenuRef.value.hide();
  await userStore.logout();
  location.href="/#/login";
}

const updatePasswordAction = ()=>{
  userInfoMenuRef.value.hide();
  isShowUplodaPasswordDialog.value = true;
}
</script>

<style>
.el-message {
  top: 20px !important;
}
.el-message:not(:last-child) {
  visibility: hidden;
}
</style>

<style scoped>
.appcontainer {
  width: 100%;
  height: 100%;
}
.xheader {
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 12px;
  padding-bottom: 5px;
  height: 50px;
  display: flex;
  -webkit-app-region: drag;
}
.xheader .title {
  margin-left: 10px;
  font-size: 23px;
  line-height: 35px;
  font-weight: 800;
}
.xheader .right {
  position: absolute;
  right: 10px;
  height: 33px;
  display: flex;
  align-items: center;
}
.aside {
  overflow: hidden;
}
.showLeftIcon {
  display: flex;
  align-items: center;
}
.el-container {
  background-color: #f9f9f9;
  color: black;
}
.userInfo{
  display: flex;
  cursor: pointer;
  flex-direction: row;
  align-items: center;
  background-color: white;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 3px;
  padding-bottom: 3px;
  border-radius: 5px;
}
.userInfo .avatar{
  width: 28px;
  height: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.userInfo .accountttc {
  display: flex;
  flex-direction: column;
  font-size: 11px;
  line-height: 12px;
  margin-left: 5px;
  font-weight: 500;
}
.userInfo .arrow{
  width: 12px;
  height: 12px;
  margin-left: 5px;
  color: #cbccd1;
}

.accountttc .ttc{
  color: #999;
  line-height: 12px;
  margin-top: 5px;
}
.accountttc .account{
  text-overflow:ellipsis; 
  width: 85px;
  overflow: hidden;
}
.logoutItem, .updatePasswordItem {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
.logoutItem .icon, .updatePasswordItem .icon{
  align-items: center;
  display: flex;
  margin-right: 5px;
}

.menuItemButton {
  padding-top: 5px;
  padding-bottom: 5px;
}
</style>
